<template>
  <div class="videodetails">
        <div class="video-detail">
            <div class="video-con">
            <video src="../../assets/video.mp4" autoplay controls muted></video>
        </div>
        <div class="video-title">
            <div class="title">{{videoTitle.title}}</div>
            <div class="play-num">{{videoTitle.playcnt_text}}</div>
            <div class="author">
                <div class="face-box">
                    <img src="../../assets/youshi.jpeg" alt="">
                </div>
                <div class="author-name">
                    <div class="name">优视汽车</div>
                    <div class="time">2天前</div>
                </div>
            </div>
        </div>
        <!-- 相关车系 -->
        <div class="aboutCar">
            <h3>相关车系</h3>
            <div class="series-car">
                <div class="car-name">
                    <div class="car-pic">
                        <img :src="relate_series.white_bg_img">
                    </div>
                    <div class="carinfo-wrapper">
                        <div class="aito">{{relate_series.series_name}}</div>
                        <div class="price">{{relate_series.price}}</div>
                    </div>
                </div>
                <div class="look-detail">
                    查看详情
                </div>
            </div>
        </div>
        <div class="video-container">
            <div class="video-header">
                <div class="video-header-title">{{video_instruction.title}}</div>
                <div class="video-more">更多<van-icon name="arrow" /></div>
            </div>
            <van-tabs color="transparent">
                <van-tab v-for="index in video_instruction.list" :key="index.video_id">
                    <template #title>
                        <div class="video-area">
                            <img :src="index.image_url" />
                            <div class="video-icon">
                                <van-icon name="play-circle-o" size="20" color="#fff"/>
                            </div>
                            <div class="video-name">{{index.name}}</div>
                        </div>
                    </template>
                </van-tab>
            </van-tabs>
        </div>
        <!-- 相关推荐 -->
        <div class="about-recommend">
            <h3>相关推荐</h3>
            <div class="recommend-item" v-for="item in recommend" :key="item.id">
                <div class="realte-text">
                    <div class="text">{{item.data.title}}</div>
                    <div class="author">{{item.data.source}}    {{item.data.view_num}}</div>
                </div>
                <div class="realte-img-box">
                    <img src="../../assets/img2.jpg"/>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'videodetails',
  data() {
    return {
        videoTitle:{},
        relate_series:{},
        video_instruction:{},
        recommend:[]

    }
  },
  async created(){
    await axios.get('http://localhost:9527/videodetails.json').then(res=>{
        this.videoTitle = res.data.Result.items.right.data
        this.relate_series = res.data.Result.items.relate_series.data.list[0]
        this.video_instruction = res.data.Result.items.video_instruction.data
        this.recommend = res.data.Result.items.relate.data.list
        console.log(this.recommend);
    })
  }
}
</script>

<style lang="scss" scoped>
.videodetails {
    padding-top: 46px;
    height: 1000px;
    .video-detail {
            .video-con {
                width: 100%;
                height: 250px;
                background: #000;
                video {
                    width: 100%;
                    height: 100%;
                }
        }
    }
    .video-title {
        padding: 17px 17px 25px 17px;
        box-sizing: border-box;
        border-bottom: 1px solid #F8F8F8;
        .title {
            font-size: 18px;
            font-weight: 500;
            line-height: 1.5;
            color: #000;
        }
        .play-num {
            font-size: 12px;
            color: #999;
        }
        .author {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 10px;
            .face-box{
                width: 35px;
                height: 35px;
                margin-right: 15px;
                img {
                    width: 100%;
                    height: 100%;
                    border: 1px solid rgba(0,0,0,.2);
                    border-radius: 50%;
                }
            }
            .author-name{
                .name {
                    font-size: 16px;
                    color: #000;
                }
                .time {
                    margin-top: 2px;
                    font-size: 12px;
                    color: #999;
                }
            }
        }
    }
    .aboutCar {
        padding: 17px;
        h3 {
            font-size: 20px;
            font-weight: 600px;
            .series-car{
                width: 100%;
            }
        }
        .series-car {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background: #F6F7F8;
            border-radius: 5px;
            .car-name {
                display: flex;
                align-items: center;
                .car-pic {
                    width: 80px;
                    height: 53px;
                    margin-right: 10px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .price {
                    font-size: 14px;
                    color: #fd4555;
                    font-weight: 600;
                    margin-top: 5px;
                }
            }
            .look-detail {
                padding: 5px 10px;
                border: 1px solid #242a33;
                border-radius: 4px;
                font-size: 12px;
                color: #242a33;
            }
        }
    }
    .video-container {
        border-bottom: 2px solid #F6F6F6;
        padding-bottom: 30px;
        .video-header {
            padding: 17px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .video-header-title{
                font-size: 21px;
                font-weight: 600;
                line-height: 21px;
                color: #333;
            }
            .video-more {
                font-size: 14px;
                color: #acb3bb;
            }
        }
        
    }
    .about-recommend {
        padding: 17px;
        .recommend-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
            padding: 20px 0;
            .realte-img-box {
                width: 108px;
                height: 72px;
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 8px;
                }
            }
            .realte-text {
                width: 220px;
                .text {
                    font-size: 18px;
                    color: #1f1f1f;
                    display: -webkit-box;
                    overflow: hidden;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                .author {
                    font-size: 12px;
                    color: #a1a7b3;
                    margin-top: 10px;
                }
            }
        }
    }
}
.videodetails ::v-deep {
    .van-tabs--line .van-tabs__wrap {
        height: 140px;
        .video-area {
            width: 110px;
            height: 140px;
            position: relative;
            img {
                width: 100%;
                height: 100%;
                border-radius: 8px;
            }
            .video-icon {
                position: absolute;
                top: 5px;
                right: 5px;
            }
            .video-name {
                width: 100%;
                height: 45px;
                padding: 10px 0 0 10px;
                box-sizing: border-box;
                position:absolute;
                bottom: 0;
                left: 0;
                color: #fff;
                font-size: 12px;
                background-image: linear-gradient(180deg,transparent,#000);
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 8px;
            }
        }
    }
    .van-tabs__wrap--scrollable .van-tab {
        padding: 0 5px;
        box-sizing: border-box;
    }
}
</style>
